<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目成员管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <el-row>
        <el-col :span="7">
          <el-input placeholder="请输入成员名称" @keyup.enter="getItemMemList()" clearable @clear="getItemMemList()">
            <template #append>
              <el-button icon="el-icon-search" @click="getItemMemList()"></el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="17"></el-col>
      </el-row>
      <!-- 列表区域 -->
      <el-tabs type="border-card" style="margin-top:10px">
        <el-tab-pane>
          <template #label>本项目成员</template>
          <el-table :data="itemMemList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="成员名称" prop="name"></el-table-column>
            <el-table-column label="成员岗位" prop="role"></el-table-column>
            <el-table-column label="所属项目">
              <template v-slot="scope">
                <span>{{this.getItemNameList(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="180px">
              <template v-slot="scope">
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeUser(scope.row.name)"  :disabled="!this.getItemState(scope.row)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane>
          <template #label>全部</template>
          <!-- 全部属于该公司的用户 不管是否属于该项目 -->
          <el-table :data="itemMemList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="成员名称" prop="name"></el-table-column>
            <el-table-column label="成员岗位" prop="role"></el-table-column>
            <el-table-column label="所属项目">
              <template v-slot="scope">
                <span>{{this.getItemNameList(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="180px">
              <template v-slot="scope">
                <!-- 如果该成员不属于本项目，才显示添加按钮 -->
                <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="addUser(scope.row.name)" :disabled="this.getItemState(scope.row)">添加</el-button>
                <!-- 如果成员属于本项目，才显示删除按钮 -->
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeUser(scope.row.name)"  :disabled="!this.getItemState(scope.row)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane>
          <template #label>其他项目成员</template>
          <el-table :data="itemMemList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="成员名称" prop="name"></el-table-column>
            <el-table-column label="成员岗位" prop="role"></el-table-column>
            <el-table-column label="所属项目">
              <template v-slot="scope">
                <span>{{this.getItemNameList(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="180px">
              <template v-slot="scope">
                <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="addUser(scope.row.name)" :disabled="this.getItemState(scope.row)">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemMemList: [],
      curItemId:0
    };
  },
  mounted(){
    this.getItemMemList();
    this.curItemId = 1;
  },
  methods:{
    getItemMemList(){
      this.itemMemList = [
        { name: "张三", role: "施工员", itemList: [{id:1,name:"项目a"},{id:2,name:"项目b"},{id:3,name:"项目c"}] },
        { name: "李四", role: "施工主管", itemList: [{id:2,name:"项目b"},{id:3,name:"项目c"}] }
      ]
    },
    getItemNameList(itemMem){
      var List = itemMem['itemList']
      var res=""
      for(var i of List){
        res = res + i['name'] + " "
      }
      return res;
    },
    getItemState(itemMem){
      var List = itemMem['itemList']
      for(var i of List){
        if (this.curItemId === i['id']){
          return true;
        }
      }
      return false;
    },
    async removeUser(user) {
      const confirmRes = await this.$confirm("确认移出该用户？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
      if (confirmRes !== "confirm") {
        return this.$message.info("取消移出");
      }
      console.log("delete" + user)
    },
    async addUser(user){
      const confirmRes = await this.$confirm("确认添加该用户？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
      if (confirmRes !== "confirm") {
        return this.$message.info("取消添加");
      }
      console.log("add"+user)
    }
  }
};
</script>

<style lang="less" scoped>
</style>
